<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三级联动</title>

</head>

<body onload="change()">
   <form>
       <select onchange="sel_one()">
       </select>
       <select onchange="sel_two()">
           <option>请选择所在的城市</option>
       </select>
       <select>
           <option>请选择所在的县区</option>
        </select>
    </form>
    <script>
        //--------获取所有的select列表，并赋值给变量-----------
        var select = document.getElementsByTagName('select');
        var sel_1 = select[0];
        var sel_2 = select[1];
        var sel_3 = select[2];
        //--------新声明一个Ajax对象-----------
        var oAjax = new XMLHttpRequest();
        //--------第一个select（省级）内容-------
        function change() {
            oAjax.open('GET', 'json/city.json', true);
            oAjax.send();
            oAjax.onreadystatechange = function () {
                if (oAjax.readyState == 4 && oAjax.status == 200) {
                    var c = JSON.parse(oAjax.responseText);
                    //-----option_1是生成select（省级）内的HTML内容--------
                    var option_1 = '<option>请选择所在的省市</option>';
                    //-----c.city.length是JSON文件下最外层city数组的长度，及它内所有{}对象的个数---------
                    for (var i = 0; i < c.city.length; i++) {
                        //-----c.city[i].name是JSON文件下最外层city数组，的下标值为i的对象里，为name属性所对应的值----------
                        option_1 += '<option>' + c.city[i].name + '</option>';
                    }
                    sel_1.innerHTML = option_1;
                }
            }
        }
        //--------第一个select（省级）触发onchange事件部分----------
        function sel_one() {
            //-------将第一个select(省级)内的"请选择所在的省市"隐藏掉--------
            //-------sel_1.firstElementChild为第一个select(省级)内的第一个子元素节点---->"请选择所在的省市"-------
            sel_1.firstElementChild.style.display = 'none';
            //-------将第三个select(县区)的内容重置为"请选择所在的县区"----------
            sel_3.innerHTML = '<option>请选择所在的县区</option>';
            //-------sel_1.selectedIndex为第一个select(省级)当前选中内容所在的索引值-----------
            //-------sel_2.selectedIndex为第二个select(城市)当前选中内容所在的索引值-----------
            //-------sel_1.selectedIndex - 1；减去 1 是因为第一个select(省级)的第一个内容为"请选择所在的省市"---------
            //-------导致所有对应的省市内容的索引值均变大 1 --------------------
            var index = sel_1.selectedIndex - 1;
            var index2 = sel_2.selectedIndex;
            oAjax.open('GET', 'json/city.json', true);
            oAjax.send();
            oAjax.onreadystatechange = function () {
                if (oAjax.readyState == 4 && oAjax.status == 200) {
                    var c = JSON.parse(oAjax.responseText);
                    //------判断 当第一个select(省级)当前的内容 与 JSON文件下最外层city数组，下标为index的对象里，为name属性所对应的值 相等时----------
                    if (sel_1.value == c.city[index].name) {
                        //-----option_2是生成select（城市）内的HTML内容--------
                        var option_2 = '';
                        for (var i = 0; i < c.city[index].city.length; i++) {
                            //------c.city[index].city[i].name是JSON文件下最外层city数组，的下标值为index的对象里，为city的数组，的下标为i的对象里，为name属性所对应的值----------
                            option_2 += '<option>' + c.city[index].city[i].name + '</option>';
                        }
                        sel_2.innerHTML = option_2;
                    }
                    //--------81~92行代码，是为了方便三级联动-------------------------
                    //------判断 当第二个select(城市)当前的内容 与 JSON文件下最外层city数组，下标是index的对象里，为city的数组，的下标为index2的对象里，为name属性所对应的值 相等时----------
                    if (sel_2.value == c.city[index].city[index2].name) {
                        //-----option_3是生成select（县区）内的HTML内容--------
                        var option_3 = '';
                        for (var i = 0; i < c.city[index].city[index2].area.length; i++) {
                            //------c.city[index].city[index2].area[i]是JSON文件下最外层city数组，的下标值为index的对象里，为city的数组，的下标为index2的对象里，为area数组，的下标为i，所对应的值----------
                            option_3 += '<option>' + c.city[index].city[index2].area[i] + '</option>';
                        }
                        sel_3.innerHTML = option_3;
                    }
                    //-----------------------------------------------------------------------------------------------
                }
            }
        }
        //--------第二个select（省级）触发onchange事件部分----------
        function sel_two() {
            //-------sel_1.selectedIndex为第一个select(省级)当前选中内容所在的索引值-----------
            //-------sel_2.selectedIndex为第二个select(城市)当前选中内容所在的索引值-----------
            //-------sel_1.selectedIndex - 1；减去 1 是因为第一个select(省级)的第一个内容为"请选择所在的省市"---------
            //-------导致所有对应的省市内容的索引值均变大 1 --------------------
            var index = sel_1.selectedIndex - 1;
            var index2 = sel_2.selectedIndex;
            oAjax.open('GET', 'json/city.json', true);
            oAjax.send();
            oAjax.onreadystatechange = function () {
                if (oAjax.readyState == 4 && oAjax.status == 200) {
                    var c = JSON.parse(oAjax.responseText);
                    //------判断 当第二个select(城市)当前的内容 与 JSON文件下最外层city数组，下标是index的对象里，为city的数组，的下标为index2的对象里，为name属性所对应的值 相等时----------
                    if (sel_2.value == c.city[index].city[index2].name) {
                        //-----option_3是生成select（县区）内的HTML内容--------
                        var option_3 = '';
                        for (var i = 0; i < c.city[index].city[index2].area.length; i++) {
                            //------c.city[index].city[index2].area[i]是JSON文件下最外层city数组，的下标值为index的对象里，为city的数组，的下标为index2的对象里，为area数组，的下标为i，所对应的值----------
                             option_3 += '<option>' + c.city[index].city[index2].area[i] + '</option>';
                         }
                         sel_3.innerHTML = option_3;
                     }
                 }
             }
         }
     </script>

 </body>

</html>